import React, { useEffect, useState, useRef } from 'react';
import { Modal, Space, Button, Tabs, Form, message } from 'dw-mx';

import { request } from 'dw-mx-request';
import { useSewTask } from 'dw-mx-sew';

import ProcessInfo from './ProcessInfo';
import WaitingTask from './WaitingTask';
import BackGroundTask from './BackGroundTask';
import WorkflowInfo from './WorkflowInfo';
import DpmnInfo from './DpmnInfo';
import BpmnInfo from './BpmnInfo';
import TaskInfo from './TaskInfo';
import ProcessDetailInfo from './ProcessDetailInfo';

export default function ProcessDetail(props) {
    // 流程任务
    const sewTask = useSewTask();
    const processVars = sewTask.getProcessVars();
    const [initValues, setInitValues] = useState(null);

    useEffect(() => {
        initTabs();
    }, []);

    const initTabs = async () => {
        const tabs = await request('/mx/SEWEngine/initProcessDetailsTabsByPiid', { piid: processVars.getPiid() });
        setInitValues(tabs);
    };

    // 签领任务
    const claimTask = async (param) => {
        if (param && null !== param[0] && undefined !== param[0] && '' !== param[0]) {
            const claimTaskResult = await request('/mx/SEWEngine/claimTask', { tid: param[0] });
            if ('1' === claimTaskResult.result_code) {
                message.success('任务 [' + claimTaskResult.result_message.tid + '] 签领成功！');
            } else {
                message.error('任务 [' + claimTaskResult.result_message.tid + '] 签领失败！');
            }
            // <Sef2UTP ti={ti} {...claim.result_message} onCompleteTask={onCompleteTask} onCancelTask={onCancelTask} />
            props.closeModel();
            // TODO 直接展示UT
        } else {
            message.error('未选中任务！');
        }
    };

    return initValues ? (
        <>
            <div style={{ height: 550 }}>
                <Modal title="业务详情" visible={true} footer={null} centered={true} width={'70%'} onCancel={props.closeModel} destroyOnClose={true}>
                    <Tabs type="card">
                        <Tabs.TabPane tab={'业务概要'} disabled={false} key={'processInfo'}>
                            <ProcessInfo claimTask={claimTask} havewaitingtask={initValues.havewaitingtask} />
                        </Tabs.TabPane>
                        {initValues.havewaitingtask != null && '2' === initValues.havewaitingtask && (
                            <Tabs.TabPane tab={'等待任务'} disabled={false} key={'waitTask'}>
                                <WaitingTask />
                            </Tabs.TabPane>
                        )}
                        {initValues.ishavebtflag != null && '1' === initValues.ishavebtflag && (
                            <Tabs.TabPane tab={'后台任务'} disabled={false} key={'backTask'}>
                                <BackGroundTask />
                            </Tabs.TabPane>
                        )}
                        {initValues.wsdataurl != null && initValues.wsdataurl != '' && (
                            <Tabs.TabPane tab={'工单一览'} disabled={false} key={'taskView'}>
                                <ProcessInfo />
                            </Tabs.TabPane>
                        )}
                        {initValues.peqlabel != null && initValues.peqlabel != '' && (
                            <Tabs.TabPane tab={initValues.peqlabel} disabled={false} key={'peqinfo'}>
                                <ProcessInfo />
                            </Tabs.TabPane>
                        )}
                        <Tabs.TabPane tab={'岗位流程图'} disabled={false} key={'dpmnInfo'}>
                            <DpmnInfo />
                        </Tabs.TabPane>
                        <Tabs.TabPane tab={'业务流程图'} disabled={false} key={'bpmnInfo'}>
                            <BpmnInfo />
                        </Tabs.TabPane>
                        <Tabs.TabPane tab={'流程任务'} disabled={false} key={'taskInfo'}>
                            <TaskInfo />
                        </Tabs.TabPane>
                        {initValues.havechild != null && initValues.havechild === '1' && (
                            <Tabs.TabPane tab={'子流程'} disabled={false} key={'childProcess'}>
                                <TaskInfo />
                            </Tabs.TabPane>
                        )}
                        {/*<Tabs.TabPane tab={'流程详细信息'} disabled={false} key={'processDetailInfo'}>*/}
                        {/*    <ProcessDetailInfo />*/}
                        {/*</Tabs.TabPane>*/}
                    </Tabs>
                </Modal>
            </div>
        </>
    ) : (
        <div style={{ height: 500 }}>
            <div>Loading......</div>
        </div>
    );
}
